import React from 'react';
import './Layout.css';
import img1 from '/utilsimg/b1.jpg';
import img2 from '/utilsimg/b2.jpg';

import b2Img from '/utilsimg/b3.jpg';
import b3Img from '/utilsimg/b4.jpg';
import b4Img from '/utilsimg/b5.jpg';
import b5Img from '/utilsimg/b6.jpg';

const imgData = [
  {
    category: '自然风景',
    images: [
      { url: img1, alt: '向日葵' },
      { url: img2, alt: '绿叶' },
    ]
  },
  {
    category: '餐饮美食',
    images: [
      { url: b2Img, alt: '可乐' },
      { url: b3Img, alt: '雪糕' },
    ]
  },
  {
    category: '建筑空间',
    images: [
      { url: b4Img, alt: '城市建筑' },
      { url: b5Img, alt: '古建筑' },
    ]
  }
];

const ImgPage: React.FC = () => {
  return (
    <div style={{ padding: 16 }}>
      {imgData.map((cat) => (
        <div key={cat.category} style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <span style={{ fontWeight: 600, fontSize: 16 }}>{cat.category}</span>
            <span style={{ color: '#888', fontSize: 14, cursor: 'pointer' }}>全部</span>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            {cat.images.map(img => (
              <img key={img.url} src={img.url} alt={img.alt} draggable onDragStart={e => {
                e.dataTransfer.setData('type', 'image');
                e.dataTransfer.setData('img', img.url);
                e.dataTransfer.setData('name', img.alt);
              }} style={{ width: 120, height: 80, objectFit: 'cover', borderRadius: 6 }} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ImgPage; 